<template>
  <basic-container>
    <avue-crud
      :data="tableData"
      :option="tableOption"
      :table-loading="Loading"
      :page.sync="page"
      @on-load="onLoad"
      @refresh-change="onLoad"
    >
      <template slot="menuLeft">
        <el-button @click="$router.back()" icon="el-icon-back" type="text" size="small">返回</el-button>
      </template>
      <template slot-scope="scope" slot="name">
        {{handleCheckInfo(scope.row).checkName || scope.row.name}}
      </template>
      <template slot-scope="scope" slot="normalDataCount">
        {{handleCheckInfo(scope.row).normalDataCount}}
      </template>
      <template slot-scope="scope" slot="problemDataCount">
        <el-link type="primary" @click.stop="showExceptionList(scope.row)">{{handleCheckInfo(scope.row).problemDataCount}}</el-link>
      </template>
    </avue-crud>
    <el-dialog class="avue-dialog avue-crud__dialog" append-to-body
               :title="'异常日志'"
               :visible.sync="logDialog"
               width="60%">
      <avue-crud
        :data="exceptionLog"
        :option="exceptionLogOption"
      ></avue-crud>
    </el-dialog>
  </basic-container>
</template>
<script>
  import { tasksState, runningType } from '@/view-module/dolphin-scheduler/pages/dag/_source/config'
  import { mapActions } from 'vuex'
  import mLog from '../metadata/log';
  import { getErrorLogList } from '@/api/quality/errorLog';
  export default {
    components: { mLog },
    data(){
      return {
        logDialog: false,
        exceptionLog:[],
        exceptionLogOption:{
          header: false,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          menu: false,
          dialogClickModal: false,
          menuWidth: 180,
          column: [
            {
              label: '异常数据',
              prop: '异常数据'
            },
            {
              label: '异常原因',
              prop: '异常情况'
            }
          ]
        },
        instanceId: this.$router.currentRoute.query.id,
        tasksState:tasksState,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        tableData:[],
        Loading: false,
        tableOption: {
          // height: 'auto',
          // calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          menu: false,
          // viewBtn: true,
          // delBtn: false,
          // menuWidth: 350,
          dialogClickModal: false,
          menuWidth: 180,
          column: [
            {
              label: '名称',
              prop: 'name'
            },
            {
              label: '状态',
              prop: 'state'
            },
            {
              label: '任务类型',
              prop: 'taskType'
            },
            {
              label: '正常条数',
              prop: 'normalDataCount'
            },
            {
              label: '异常条数',
              prop: 'problemDataCount'
            }
          ]
        },
        searchParams: {
          // Search keywords
          searchVal: '',
          // Number of pages
          pageSize: 10,
          // Current page
          pageNo: 1

        },
        type: 4
      }
    },
    methods: {
      ...mapActions('dag', ['getTaskInstanceList']),
     // ...mapActions('dag', ['getProcessInstance']),
      handleCheckInfo(row) {
        if(row.dataCheckInfo){
          return row.dataCheckInfo
        } else {
          return {
            checkName: '',
            normalDataCount: '',
            problemDataCount: ''
          }
        }
      },
      showExceptionList(row) {
        this.exceptionLog = JSON.parse(row['dataCheckInfo']['problemDataInfo'])
        this.logDialog = true;
      },
      onLoad() {
        console.log(this.instanceId);
        this._getProcessInstanceListP();
      },
      _rtState (code) {
        let o = tasksState[code]
        return `<em class="fa ansfont ${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
      },
      /**
       * get list data
       */
      _getProcessInstanceListP () {
        this.searchParams.pageNo = this.page.currentPage;
        this.searchParams.pageSize = this.page.pageSize;
        this.getTaskInstanceList({
          ...this.searchParams,
          type: this.type,
          processInstanceId: this.instanceId
        }).then(res => {
          if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
            this.searchParams.pageNo = this.searchParams.pageNo - 1
          } else {
            this.tableData = [];
            this.tableData = res.totalList;
            this.page.total = res['total'];
          }
          this.monitorLoading = false;
        }).catch(e => {

        })
        // getErrorLogList({
        //   ...this.searchParams
        // }).then(res => {
        //   console.log(res)
        //   if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
        //     this.searchParams.pageNo = this.searchParams.pageNo - 1
        //   } else {
        //     this.tableData = [];
        //     this.tableData = res.data.data.lists;
        //     this.total = res.data.totalCount;
        //     this.isLoading = false
        //   }
        // }).catch(e => {
        //   this.isLoading = false
        // })
      }
    }
  }
</script>
<style lang="scss">
  .content-log {
    height: 50vh;
    background: #002A35;
    padding:6px 2px;
    .content-log-box {
      width: 100%;
      height: 100%;
      word-break:break-all;
      textarea {
        background: none;
        color: #9CABAF;
        border: 0;
        font-family: 'Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif';
        font-weight: bold;
        resize:none;
        line-height: 1.6;
        padding: 0px;
      }
    }
  }
</style>
